// src/components/FixedHeader.tsx
import React, { useState, useEffect } from 'react';
import { Layout, Menu, Button } from 'antd';
import { Link } from 'react-router-dom';

const { Header } = Layout;

const FixedHeader = () => {
  const [visible, setVisible] = useState(true);
  const [lastScrollY, setLastScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      if (currentScrollY > lastScrollY && currentScrollY > 80) {
        setVisible(false); // 向上滚动隐藏
      } else {
        setVisible(true); // 向下滚动显示
      }
      setLastScrollY(currentScrollY);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [lastScrollY]);

  return (
    <Header
      style={{
        position: 'fixed',
        top: 0,
        width: '100%',
        zIndex: 999,
        backgroundColor: '#fff',
        transition: 'top 0.3s',
        boxShadow: visible ? '0 2px 8px rgba(0,0,0,0.1)' : 'none',
      }}
    >
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', justifyContent: 'space-between' }}>
        <h1 style={{ color: '#1890ff' }}>公司名称</h1>
        <Menu mode="horizontal" theme="light">
          <Menu.Item key="home">
            <Link to="/">首页</Link>
          </Menu.Item>
          <Menu.Item key="tourism">
            <Link to="/tourism">旅游</Link>
          </Menu.Item>
          <Menu.Item key="news">
            <Link to="/news">新闻</Link>
          </Menu.Item>
          <Menu.Item key="ecommerce">
            <Link to="/cultural-ecommerce">文创电商</Link>
          </Menu.Item>
        </Menu>
      </div>
    </Header>
  );
};

export default FixedHeader;